<template>
  <div class="LeaseIndex">
    <div class="material-header" align="left">
      <van-image class="material-header-img" width="1.5rem" height="3.5rem" fit="contain" :src="img" @click="down"/>
      <van-search class="material-header-search" v-model="value" placeholder="搜索" background="none"/>
    </div>

    <div>
      <van-swipe :autoplay="3000" style="height: 10rem;width: 100%">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image"  />
        </van-swipe-item>
      </van-swipe>
    </div>



    <van-form style="text-align: center;background-color: #dcdee0;padding:0.5rem">

<!--    <div style="height: 2.3rem;background-color: white;padding: 0.5rem 0rem 0.5rem 0rem">-->
      <van-cell is-link :value="areaTest" @click="showArea = true"/>
      <van-action-sheet v-model="showArea" title="地址">
        <van-area
          :area-list="areaList"
          :columns-placeholder="['请选择', '请选择', '请选择']"
          @cancel="cancelArea"
          @confirm = "confirmArea"
        />
      </van-action-sheet>
<!--    </div>-->
    </van-form>


    <div class="material-list" style="text-align: center">
      <van-icon :class="this.van" class="anniu" name="bars" size="25" @click="toCategory"/>
      <van-tabs  @click="onClick" style="text-align: left;margin: -40px 0px 0px 0px">
        <van-tab title="推荐" align="left" style="padding: 0.6rem">
          <div class="material-list-grid" v-for="(rental,index) in this.rentalList" @click="toDetails(rental.rentalId)">
            <van-image height="10rem" fit="cover" :src="rental.rentalUrlAl"/>
            <div class="material-list-grid-content">
              <div align="left" style="background-color: gainsboro;border-radius: 1rem">
                <van-image style="float: left;margin-top: 0.25rem;margin-left: 0.5rem" round width="1rem" height="1rem" fit="cover" :src="rental.supplierPic"/>
                <p style="padding: 0;height: 1.5rem;line-height: 1.55rem;font-size: 0.6rem">专业{{rental.teamName}}{{rental.rentalRegion}}直营</p>
              </div>
              <div align="left">
                <p>{{rental.rentalName}}</p>
                <p>{{rental.rentalRegion}}</p>
              </div>
              <div align="left">
                <div>
                  <span style="color: goldenrod;background-color: #2c3e50;padding: 0.1rem;border-radius: 0.2rem">市场价</span>
                  <span style="font-weight: bolder;font-size: 1rem">￥{{rental.rentalPrice}}</span>
                </div>
                <!--              <div><span>市场价:</span><span>￥{{c.price}}</span></div>-->
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab v-for="(team,index) in this.leaseList" :name="team.teamId" :title="team.teamName" :key="index" align="left" style="padding: 0.6rem">
          <div class="material-list-grid" v-for="(rental,index) in rentalList" @click="toDetails(rental.rentalId)">
            <van-image height="10rem" fit="cover" :src="rental.rentalUrlAl"/>
            <div class="material-list-grid-content">
              <div align="left" style="background-color: gainsboro;border-radius: 1rem">
                <van-image style="float: left;margin-top: 0.25rem;margin-left: 0.5rem" round width="1rem" height="1rem" fit="cover" :src="rental.supplierPic"/>
                <p style="padding: 0;height: 1.5rem;line-height: 1.55rem;font-size: 0.6rem">专业{{rental.team.teamName}}直营</p>
              </div>
              <div align="left">
                <p>{{rental.rentalName}}</p>
                <p>{{rental.rentalRegion}}专卖</p>
              </div>
              <div align="left">
                <div>
                  <span style="color: goldenrod;background-color: #2c3e50;padding: 0.1rem;border-radius: 0.2rem">市场价</span>
                  <span style="font-weight: bolder;font-size: 1rem">￥{{rental.rentalPrice}}</span>
                </div>
                <!--              <div><span>市场价:</span><span>￥{{c.price}}</span></div>-->
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>

  import {
    getLeaseList,
    selectRentalServiceList,selectRentalServiceListOne,selectRentalServiceListTwo
  } from '@/api/constructionTeam/rental.js'
  import areaList from '@/utils/area';
  export default {
    name: "LeaseIndex",
    data() {
      return{
        // 选择地区展示
        showArea:false,
        areaTest:"请选择省市区",
        areaList,
        leaseList: [],
        value: '',
        img: require('@/image/fanhui.png'),
        images: [
          require(
            '@/assets/xiu1.jpg',
          ),
          require(
            '@/assets/xiu2.png',
          ),
          require(
            '@/assets/xiu3.jpg',
          )
        ],
        rentalList:[],
      }
    },
    created() {
      this.getList();
      this.onClick(0,"推荐");
    },
    methods: {

      // 地址取消事件
      cancelArea(res){
        this.showArea = false;
      },

      // 地址确定事件
      confirmArea(res){
        // this.areaTest = "";
        for (let i = 0; i < res.length; i++){
          this.areaTest = res[1].name;
        }
        selectRentalServiceListOne(this.areaTest).then(res=>{
          this.rentalList = res.data.data;
        })
        this.showArea = false;
      },

      down(){
        // this.$router.go(-1)
        this.$router.push({path:"/"});
      },
      toCategory(){
        console.log("*****222222222******")
        this.$router.push({path:"/lease_category"});
      },
      // 查询建房主材类别列表
      getList(){
        getLeaseList().then((res) => {
          this.leaseList = res.data.data;
        });
      },
      onClick(name, title) {
        if (this.areaTest == "请选择省市区"){
          selectRentalServiceList(name).then((res) => {
            this.rentalList = res.data.data;
          });
        }else{
          var cateGoryId =name;
          var address =this.areaTest;
          var data = {address:address,a:cateGoryId}
          selectRentalServiceListTwo(data).then(res=>{
            this.rentalList = res.data.data;
          })
          selectRentalServiceListOne(this.areaTest).then(res=>{
            this.rentalList = res.data.data;
          })
        }


      },
      toDetails(rentalId){
        this.$router.push({path:"/RentalDetails",query:{rentalId:rentalId}});
      }
    },
  }
</script>

<style scoped>
  .material-header{
    background-color: #fff;
  }
  .material-header-img{
    margin-left: 1rem;
  }
  .material-header-search{
    float: right;
    margin: 0.2rem 0.5rem 0 0;
  }
  .material-list-grid{
    display: inline-block;
    width: 46%;
    padding: 0.4rem;
  }

  .anniu{
    /*height: 0rem;*/
    left: 10rem;
    top: 0rem;
    position: relative;
    z-index: 999999;
    background-color: whitesmoke;
  }
</style>
